import React, {useContext} from 'react';
import {View, ScrollView, TouchableOpacity, Platform} from 'react-native';
import {Button, Text, ListItem, Avatar} from '@rneui/base';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import {useMount, useSafeState} from 'ahooks';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
const NativeStack = createNativeStackNavigator();
import GlobalContext from '@/GlobalContext';

import {getDefaultHeaderHeight} from '@react-navigation/elements';
import {
  useSafeAreaFrame,
  useSafeAreaInsets,
} from 'react-native-safe-area-context';

import routers from './routers';

const LGroup = ({title = '标题', children}) => {
  const [expanded, setExpanded] = useSafeState(true);
  return (
    <ListItem.Accordion
      content={
        <ListItem.Content>
          <Text>{title}</Text>
        </ListItem.Content>
      }
      isExpanded={expanded}
      onPress={() => {
        setExpanded(!expanded);
      }}>
      <View
        style={{
          paddingLeft: 10,
        }}>
        {children}
      </View>
    </ListItem.Accordion>
  );
};

const rPPath = 'OPlayer';
export default ({setLeftNavIsOpen}) => {
  const {navigationRef} = useContext(GlobalContext);
  const frame = useSafeAreaFrame();
  const insets = useSafeAreaInsets();
  const headerHeight = getDefaultHeaderHeight(frame, false, insets.top);
  
  // useMount(() => {
  //   try {
  //     const headerHeight = getDefaultHeaderHeight(frame, false, insets.top);
  //     console.log('headerHeight', Platform.OS, headerHeight);
  //     console.log('frame', frame);
  //     console.log('insets', insets);
  //   } catch (e) {
  //     console.log('异常', e.message);
  //   }
  // });
  return (
    <View style={{flex: 1}}>
      <View
        style={{
          backgroundColor: '#f9f9f9',
          flexDirection: 'row',
          alignItems: 'center',
          height: headerHeight - insets.top,
          paddingHorizontal: 12,
        }}>
        <Avatar
          size={36}
          rounded
          title="@"
          containerStyle={{backgroundColor: 'purple'}}
        />
        <View style={{marginLeft: 16, flex: 1}}>
          <Text h4>OPlayer Lite</Text>
          <Text style={{color: '#666'}}>V.1.0.0</Text>
        </View>
        <TouchableOpacity
          onPress={() => {
            navigationRef?.navigate('Home');
          }}>
          <Text>Home</Text>
        </TouchableOpacity>
      </View>
      <ScrollView style={{flex: 1}}>
        {routers.map(([, [groupName, pages = []]], groupIndex) => (
          <LGroup key={groupIndex} title={groupName}>
            {pages.map(([pageKey, , pageName, LIcon], pageIndex) => (
              <TouchableOpacity
                key={pageIndex}
                onPress={() => {
                  navigationRef?.navigate(`${rPPath}/${pageKey}`);
                  setLeftNavIsOpen(false);
                }}>
                <ListItem>
                  {LIcon}
                  <Text>{pageName}</Text>
                </ListItem>
              </TouchableOpacity>
            ))}
          </LGroup>
        ))}
      </ScrollView>
    </View>
  );
};
